<template>
  <div class="box-container">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>小组列表</el-breadcrumb-item>
  </el-breadcrumb>
    <div class="title">
      <p class="big-title">柚子小组</p>
    </div>
    <div class="btn">
        <el-button size="small" type="warning" @click="create"  plain>创建小组</el-button>
        <el-button size="small" type="warning"  @click="open" plain>添加小组</el-button>
    </div>
     <el-divider><i class="el-icon-s-promotion"></i></el-divider>
     <div v-if="groups.length" class="group-item" >
        <el-card class="box-card"  v-for="(item, index) in groups" :key="index"  v-loading="loading" >
              <el-image :src="item.cover" @click="getList(item.id)"></el-image>
              <div class="text" @click="getList(item.id)">
                <h3>{{item.groupname}}</h3>
                <p>{{item.instruction}}</p>
              </div>
                <el-tooltip class="item" effect="dark" content="点击进入小组详情页" placement="bottom">
                      <el-button type="warning" class="el-icon-s-operation" plain  @click="getList(item.id)"></el-button>
            </el-tooltip>
        </el-card>
     </div>
    <el-empty v-else :image-size="200"></el-empty>
  </div>
</template>

<script>
import { getGroup, joinGroup } from '@/utils/api/group.js'
export default {
  name: '',
  props: {},
  components: {
  },
  inject: ['reload'],
  data () {
    return {
      groups: [], // 小组列表
      isJoin: false,
      centerDialogVisible: false,
      isShow: false,
      listId: '',
      loading: true
    }
  },
  created () {
    this.loadGroup()
    const hashLocation = sessionStorage.getItem("hashLocation");// 缓存中获取当前页面的路由名称
    const newLocation = hashLocation.split("#/")[1];
    // 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
    this.$matomo.setCustomUrl("http://39.105.118.190" + "/" + newLocation);// 覆盖页面报告的url，可以自定义页面url，加上本页面路由
    //  this.$matomo.trackEvent.addListener(document.getElementsByClassName('el-button')) // 事件
    this.$matomo.trackPageView(hashLocation);// 页面名称,可以自定义页面名称
  },
  methods: {
    // 获取全部组列表
    loadGroup () {
      getGroup().then(res => {
        this.groups = res.data.data
        this.loading = false
      })
    },
    dissolve (id) {
      // 打开对话框
      this.centerDialogVisible = true
      this.listId = id
    },
    create () {
      this.$router.push('/page/group/createGroup')
    },
    getList (id) {
      this.$router.push({
        name: 'GroupDetail',
        params: {
          listId: id
        }
      })
    },
    submit () {
      this.isShow = true;
    },

    onSuccess (msg) {
      this.isShow = false; // 通过验证后，需要手动关闭模态框
    },

    onClose () {
      this.isShow = false;
    },
    open () {
      this.$prompt('请输入邀请码', '加入小组', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d{8}$/,
        inputErrorMessage: '邀请码格式不正确'
      }).then(({ value }) => {
        const data = {
          authCode: value,
        }
        joinGroup(data).then(res => {
          this.$message({
            type: 'success',
            message: '加入小组成功'
          });
          this.reload()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style lang="less" scoped>
.title{
    position: relative;
    top: 20px;
    margin-bottom: 45px;
    p{
      text-align: center;
    }
    .big-title{
      font-size: 34px;
      margin-bottom: 10px;
      position: relative;
  }
  .big-title::before,.big-title::after{
        content: '';
        display: inline-block;
        width: 20px;
        height: 1px;
        background-color: #000;
        position: absolute;
        top: 20px;
      }
    .big-title::before{
      left: 50%;
      transform: translate(-102px, 0);
    }
    .big-title::after{
        right: 50%;
        transform: translate(102px, 0);
      }
}
.btn{
  display: flex;
  justify-content: center;
}
.el-divider__text, .el-link{
      font-size: 25px;
}
.group-item{
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
  .box-card{
  margin-top: 30px;
  width: 35%;
  height: 150px;
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
  /deep/.el-card__body{
      padding: 0;
    display: flex;
    justify-content: space-between;
    border: 1px gray;
    }
  .el-image{
    width: 30%;
    height: 150px;
    display: inline-block;
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
  }
  .el-image:hover{
   cursor: pointer;
  }
  .text{
    cursor: pointer;
     h3{
       margin-top: 30px;
    }
   p{
    font-size: 12px;
    display: inline-block;
     }
   }
   .el-button{
     border:0 0 0 1px solid gray;
   }
 }
 .box-card:hover{
    transform: translate(0,-10px);
    transition: 0.8s;
 }
}
/deep/.el-dialog {
  margin: 35vh auto !important;
}
/deep/.el-dialog--center .el-dialog__body{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .cofirm{
    margin-top: 10px;
    background: #F56C6C;
    font-size: 15px;
    border: none;
    width: 20%;
    box-shadow: 0 0 0 2px #ddd;
  }
  .cofirm:hover{
    cursor: pointer;
    background: orange;
  }
}

</style>
